<template>
  <div id="teacher">
    <h1>讲师页面</h1>

    <div class="avatar">
      <img :src="teacher.avatar" alt="">
    </div>
    <div class="tap">
      <van-tabs v-model="active">
        <van-tab title="讲师介绍">
          <div class="warp introduction">
            <h4>老师简介</h4>
            <span class="span">{{teacher.introduction}}</span>
          </div>
        </van-tab>
        <van-tab title="主讲课程">
          <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          offset='30'
          @load="onLoad"
         >
              <div class="warp" v-for='(item,index) in teacher_course' :key='index'>
              <div class="list_item">
                {{item.title}}
              </div>
          </div>
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          </van-list>
         
        </van-tab>
      </van-tabs>

     
           <!-- <div :class="{item:true,active:active==index}" @click='fn(index)' v-for="(item,index) in course_list" :key='index'>{{item}}</div> -->
    
     
    </div>
    <!-- <div></div> -->
    <!-- <transition name="slide">
     <div class="box" v-show='show'> </div>
    </transition>
    <button @click='show=!show'>按钮</button>
    -->
  </div>
</template>

<script>
import {teacher,maincourse} from '@/http/api'
export default {
name:"Teacher",
data() {
return {
  _id:'',
  teacher:{},
  limit:4,
  page:1,
  teacher_course:[],
  course_list:['讲师介绍','主讲课程'],
  active:0,
  show:true,
   loading: false,
      finished: false,
      list:[],
   foo:true
}
},
//生命周期 - 创建完成（访问当前this实例）
async created() {
   this._id=this.$route.query._id;
  // this._id=this.$route.params._id;
   console.log(this._id)
   this.getList();
  
},
//生命周期 - 挂载完成（访问DOM元素）
async mounted() {
   let res = await teacher(this._id);
   console.log(res)
    this.teacher=res.data.data.teacher;
},
methods:{
  fn(index){
    this.active=index;
  },
 async getList(){
    let res = await maincourse({page:this.page,limit:this.limit,teacher_id:this._id});
      console.log(res);
      if(res.data.data.list.length==0){
         this.foo=false
      }
      // this.teacher_course=res.data.data.list;
      this.teacher_course.push(...res.data.data.list)
  },
   onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.page++;
        console.log(this.page)
        this.getList()


        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (!this.foo) {
          this.finished = true;
        }
      // }, 1000);
    },
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.warp{
  display: flex;
  width: 70%;
  /* border: 1px solid black; */
  margin: 10px auto;
  flex-direction: column;
  /* justify-content: flex-start; */
}
/* h4{
  border: 1px solid black;

}
.span{
  display: block;
} */
.list_item{
  width: 200px;
  height: 400px;
  border: 1px solid black;
  margin-top: 10px;
  background: red;
}
.tap{
  width:100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;;
}
.item{
  font-size: 18px;
  /* font-weight: 700; */
  width: 80px;
  /* border: 1px solid black; */
  line-height: 40px;
}
.active{
  border-bottom: 5px solid red;
}
.box{
  width: 40px;
  height: 5px;
  background: red;
}
/* 进入时 */
.slide-enter{
  transform: translateX(0);
}
/* 进入后 */
.slide-enter-to{

   transform: translateX(400px);
}
/* 离开时 */
.slide-leave{
   transform: translateX(400px);
}
/* 离开后 */
.slide-leave-to{
   transform: translateX(0);

}
/* 进入、离开的过程 */
.slide-enter-active,.slide-leave-active{
  transition: all 1s linear;
}
</style>